<template>
  <div class="box-border w-full h-full px-4 pb-10 overflow-y-auto">
    <div class="rounded-md border_blue !border-blue-500 w-32 flex items-center justify-center px-2">
      管道泄漏设置
    </div>
    <div class="w-full mt-2 text-base">
      <!-- 乌百线 -->
      <div>
        <div class="flex items-center font-bold">
          <el-checkbox v-model="wb_leak_lineChecked" class="mr-2">乌百线</el-checkbox>
        </div>
        <div v-show="wb_leak_lineChecked" class="w-full text-base">
          <div
            class="w-[440px] h-[150px] bg-white rounded-lg shadow flex flex-col items-center gap-2 py-4 box-border"
          >
            <div class="flex items-center justify-center gap-4">
              <span class="">泄漏点距管道起点里程 </span>
              <el-input v-model="wb_leak_position" class="!w-[160px]" />
              <span>km</span>
            </div>
            <div class="flex items-center justify-center gap-4">
              <span class="ml-24">泄漏时间</span>
              <el-input v-model="wb_leak_time" class="!w-[160px]" />
              <span>h</span>
            </div>
            <div class="flex items-center justify-center gap-4">
              <span class="ml-[120px]">泄漏流量</span>
              <el-input v-model="wb_leak_flow" class="!w-[160px]" />
              <span>m³/h</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 百克线 -->
      <div>
        <div class="flex items-center font-bold">
          <el-checkbox v-model="bk_leak_lineChecked" class="mr-2">百克线</el-checkbox>
        </div>
        <div v-show="bk_leak_lineChecked" class="w-full text-base">
          <div
            class="w-[440px] h-[150px] bg-white rounded-lg shadow flex flex-col items-center gap-2 py-4 box-border"
          >
            <div class="flex items-center justify-center gap-4">
              <span class="">泄漏点距管道起点里程 </span>
              <el-input v-model="bk_leak_position" class="!w-[160px]" />
              <span>km</span>
            </div>
            <div class="flex items-center justify-center gap-4">
              <span class="ml-24">泄漏时间</span>
              <el-input v-model="bk_leak_time" class="!w-[160px]" />
              <span>h</span>
            </div>
            <div class="flex items-center justify-center gap-4">
              <span class="ml-[120px]">泄漏流量</span>
              <el-input v-model="bk_leak_flow" class="!w-[160px]" />
              <span>m³/h</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 调油一线 -->
      <div>
        <div class="flex items-center font-bold">
          <el-checkbox v-model="ty_leak_lineChecked" class="mr-2">调油一线</el-checkbox>
        </div>
        <div v-show="ty_leak_lineChecked" class="w-full text-base">
          <div
            class="w-[440px] h-[150px] bg-white rounded-lg shadow flex flex-col items-center gap-2 py-4 box-border"
          >
            <div class="flex items-center justify-center gap-4">
              <span class="">泄漏点距管道起点里程 </span>
              <el-input v-model="ty_leak_position" class="!w-[160px]" />
              <span>km</span>
            </div>
            <div class="flex items-center justify-center gap-4">
              <span class="ml-24">泄漏时间</span>
              <el-input v-model="ty_leak_time" class="!w-[160px]" />
              <span>h</span>
            </div>
            <div class="flex items-center justify-center gap-4">
              <span class="ml-[120px]">泄漏流量</span>
              <el-input v-model="ty_leak_flow" class="!w-[160px]" />
              <span>m³/h</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 新81#线 -->
      <div>
        <div class="flex items-center font-bold">
          <el-checkbox v-model="new81_leak_lineChecked" class="mr-2">新81#线</el-checkbox>
        </div>
        <div v-show="new81_leak_lineChecked" class="w-full text-base">
          <div
            class="w-[440px] h-[150px] bg-white rounded-lg shadow flex flex-col items-center gap-2 py-4 box-border"
          >
            <div class="flex items-center justify-center gap-4">
              <span class="">泄漏点距管道起点里程 </span>
              <el-input v-model="new81_leak_position" class="!w-[160px]" />
              <span>km</span>
            </div>
            <div class="flex items-center justify-center gap-4">
              <span class="ml-24">泄漏时间</span>
              <el-input v-model="new81_leak_time" class="!w-[160px]" />
              <span>h</span>
            </div>
            <div class="flex items-center justify-center gap-4">
              <span class="ml-[120px]">泄漏流量</span>
              <el-input v-model="new81_leak_flow" class="!w-[160px]" />
              <span>m³/h</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 响应式数据
const wb_leak_lineChecked = ref(false)
const bk_leak_lineChecked = ref(false)
const ty_leak_lineChecked = ref(false)
const new81_leak_lineChecked = ref(false)

const wb_leak_time = ref('2')
const bk_leak_time = ref('3')
const ty_leak_time = ref('4')
const new81_leak_time = ref('5')

const wb_leak_flow = ref('50')
const bk_leak_flow = ref('50')
const ty_leak_flow = ref('50')
const new81_leak_flow = ref('50')

const wb_leak_position = ref('10')
const bk_leak_position = ref('10')
const ty_leak_position = ref('10')
const new81_leak_position = ref('10')

const validateSettings = () => {
  // 至少选择一条管线进行泄漏模拟
  if (
    !wb_leak_lineChecked.value &&
    !bk_leak_lineChecked.value &&
    !ty_leak_lineChecked.value &&
    !new81_leak_lineChecked.value
  ) {
    ElMessage.error('请至少选择一条管线进行泄漏模拟')
    return false
  }

  // 乌百线泄漏校验
  if (wb_leak_lineChecked.value) {
    if (!wb_leak_position.value) {
      ElMessage.error('乌百线泄漏点距管道起点里程不能为空')
      return false
    }
    if (!wb_leak_time.value) {
      ElMessage.error('乌百线泄漏时间不能为空')
      return false
    }
    if (!wb_leak_flow.value) {
      ElMessage.error('乌百线泄漏流量不能为空')
      return false
    }
  }

  // 百克线泄漏校验
  if (bk_leak_lineChecked.value) {
    if (!bk_leak_position.value) {
      ElMessage.error('百克线泄漏点距管道起点里程不能为空')
      return false
    }
    if (!bk_leak_time.value) {
      ElMessage.error('百克线泄漏时间不能为空')
      return false
    }
    if (!bk_leak_flow.value) {
      ElMessage.error('百克线泄漏流量不能为空')
      return false
    }
  }

  // 调油一线泄漏校验
  if (ty_leak_lineChecked.value) {
    if (!ty_leak_position.value) {
      ElMessage.error('调油一线泄漏点距管道起点里程不能为空')
      return false
    }
    if (!ty_leak_time.value) {
      ElMessage.error('调油一线泄漏时间不能为空')
      return false
    }
    if (!ty_leak_flow.value) {
      ElMessage.error('调油一线泄漏流量不能为空')
      return false
    }
  }

  // 新81#线泄漏校验
  if (new81_leak_lineChecked.value) {
    if (!new81_leak_position.value) {
      ElMessage.error('新81#线泄漏点距管道起点里程不能为空')
      return false
    }
    if (!new81_leak_time.value) {
      ElMessage.error('新81#线泄漏时间不能为空')
      return false
    }
    if (!new81_leak_flow.value) {
      ElMessage.error('新81#线泄漏流量不能为空')
      return false
    }
  }

  return true
}

const isFormValid = computed(() => {
  // 乌百线泄漏校验
  if (wb_leak_lineChecked.value) {
    if (!wb_leak_position.value || !wb_leak_time.value || !wb_leak_flow.value) {
      return false
    }
  }

  // 百克线泄漏校验
  if (bk_leak_lineChecked.value) {
    if (!bk_leak_position.value || !bk_leak_time.value || !bk_leak_flow.value) {
      return false
    }
  }

  // 调油一线泄漏校验
  if (ty_leak_lineChecked.value) {
    if (!ty_leak_position.value || !ty_leak_time.value || !ty_leak_flow.value) {
      return false
    }
  }

  // 新81#线泄漏校验
  if (new81_leak_lineChecked.value) {
    if (!new81_leak_position.value || !new81_leak_time.value || !new81_leak_flow.value) {
      return false
    }
  }

  // 至少选择一条管线进行泄漏模拟
  if (
    !wb_leak_lineChecked.value &&
    !bk_leak_lineChecked.value &&
    !ty_leak_lineChecked.value &&
    !new81_leak_lineChecked.value
  ) {
    return false
  }

  return true
})

const getParamsData = () => {
  return {
    M_1: wb_leak_lineChecked.value ? '1' : '0',
    M_2: bk_leak_lineChecked.value ? '1' : '0',
    M_3: ty_leak_lineChecked.value ? '1' : '0',
    M_4: new81_leak_lineChecked.value ? '1' : '0',
    LOC_1: wb_leak_position.value,
    LOC_2: bk_leak_position.value,
    LOC_3: ty_leak_position.value,
    LOC_4: new81_leak_position.value,
    TIME_1: wb_leak_time.value,
    TIME_2: bk_leak_time.value,
    TIME_3: ty_leak_time.value,
    TIME_4: new81_leak_time.value,
    XL_Q_1: wb_leak_flow.value,
    XL_Q_2: bk_leak_flow.value,
    XL_Q_3: ty_leak_flow.value,
    XL_Q_4: new81_leak_flow.value
  }
}

// 暴露给父组件的方法和数据
defineExpose({
  validateSettings,
  isFormValid,
  getParamsData
})
</script>

<style scoped>
.border_blue {
  border: 2px solid rgba(69, 122, 178, 1);
}
</style>
